<template>
    <!-- 筛选区 -->
    <div class="sub-filter" v-if="sku">
        <div class="item" v-for="(key, value) in sku" :key="key">
            <div class="head">{{ value }}:</div>
            <div class="body">
                <el-card shadow="hover">
                    <a href="javascript:;">全部</a></el-card
                >
                <el-card v-for="item in key" :key="item.id" shadow="hover">
                    <a
                        href="javascript:;"
                        @click="active = item.id"
                        :class="{ active: active == item.id }"
                        >{{ item.attribute_value }}</a
                    >
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const { sku } = defineProps(['sku'])
const active = ref('')
for (let value in sku) {
    sku[value].map(item => {
        item.id = Math.random()
    })
}
</script>

<style lang="scss" scoped>
.sub-filter {
    background: #fff;
    padding: 25px;
    .item {
        display: flex;
        line-height: 40px;
        .head {
            width: 80px;
            color: #999;
            font-size: 16px;
            margin-bottom: 5px;
            line-height: 32px;
        }
        .body {
            flex: 1;
            display: flex;
            .el-card {
                width: auto;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 5px;
                a {
                    width: auto;
                    height: 30px;
                    transition: all 0.3s ease;
                    display: inline-block;
                    &.active,
                    &:hover {
                        color: #da9233;
                    }
                }
            }
        }
    }
}
</style>
